<template>
  <div class="ranking-list">
    <div class="header">
      <h2>排行榜</h2>
      <p>更新时间：{{ updateTime }}</p>
    </div>
    <div class="trophy-section">
      <div class="trophy">🏆</div>
      <div class="trophy-person left">🧍</div>
      <div class="trophy-person right">🧍</div>
    </div>
    <div class="my-rank">
      <span>我的排名：</span>
      <span class="rank-number">第15名</span>
    </div>
    <div class="rank-headers">
      <span>排名</span>
      <span>姓名</span>
      <span>活跃度</span>
    </div>
    <ul class="rank-list">
      <li v-for="(item, index) in rankingData" :key="index" class="rank-item">
        <span class="rank">
          <span v-if="index < 3" class="medal">{{ medals[index] }}</span>
          <span v-else>{{ index + 1 }}</span>
        </span>
        <span class="name">
          <img :src="item.avatar" :alt="item.name" class="avatar" />
          {{ item.name }}
        </span>
        <span class="score">{{ item.score }}分</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const updateTime = ref('2021-11-16')
const medals = ['🥇', '🥈', '🥉']
const rankingData = ref([
  {
    name: '千库素材网',
    score: 100,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 99,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 98,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 97,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 97,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 97,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 100,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 99,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 98,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 97,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 97,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 97,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 100,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 99,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 98,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 97,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 97,
    avatar: '/placeholder.svg?height=40&width=40'
  },
  {
    name: '千库素材网',
    score: 97,
    avatar: '/placeholder.svg?height=40&width=40'
  }
])
</script>

<style scoped>
.ranking-list {
  font-family: Arial, sans-serif;
  max-width: 300px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
  background-color: #4a90e2;
  color: white;
  padding: 10px;
  text-align: center;
}

.header h2 {
  margin: 0;
  font-size: 1.2em;
}

.header p {
  margin: 5px 0 0;
  font-size: 0.8em;
}

.trophy-section {
  background-color: #4a90e2;
  height: 60px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.trophy {
  font-size: 40px;
  position: relative;
  top: 20px;
}

.trophy-person {
  font-size: 20px;
  position: absolute;
  bottom: 0;
}

.trophy-person.left {
  left: 20%;
}

.trophy-person.right {
  right: 20%;
}

.my-rank {
  background-color: #f0f0f0;
  padding: 10px;
  font-size: 0.9em;
  display: flex;
  justify-content: space-between;
}

.rank-number {
  color: #4a90e2;
  font-weight: bold;
}

.rank-headers {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f8f8f8;
  font-size: 0.8em;
  color: #666;
}

.rank-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.rank-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.rank-item:last-child {
  border-bottom: none;
}

.rank {
  width: 30px;
  text-align: center;
  font-weight: bold;
}

.medal {
  font-size: 1.2em;
}

.name {
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.score {
  font-weight: bold;
  color: #4a90e2;
}
</style>
